<!--
- Author:  LiShibin.
- Date:    2018/8/19.
- File:    transfer.
-->
<template>
  <div>
    <div class="EditReceiptAddress">
      <ul>
        <li class="sli">
        <div class="lefticon">
          <i class="iconfont icon-tel"></i></div>
        <div class="fl w550">
          <span>{{memberInfo.member_mobile}}</span>
          <!--<input type="tel" class="inp" style="display: none" placeholder="输入账号(手机号)" v-model="mobile">-->
        </div>
        </li>
        <!--<li class="login_ipt" style="position: relative; margin-bottom: 0; border-bottom: 1px solid #dcdddd">-->
          <!--<i class="iconfont icon-edit" style="position: absolute; top: 13px; left: 0.5rem; font-size: 14px;"></i>-->
          <!--<input type="text" placeholder="图形验证码" style="text-indent: 1.25rem;" v-model="imgCode">-->
          <!--<div style="position: absolute; right: 10px; top: 8px;width: 120px; height: 27px; line-height: 26px; border: 1px solid #aaa">-->
            <!--<img style="width: 90px; height: 26px;" :src="imgCodeSrc" alt="">-->
            <!--<span style=" position: absolute; right: 0; top: 0; display: inline-block; height: 26px; width: 30px; line-height: 26px;text-align: center" @click="getImgCode">刷新</span>-->
          <!--</div>-->
        <!--</li>-->
        <li class="sli">
          <div class="lefticon"><i class="iconfont icon-postcode"></i></div>
          <div class="fl w550">
            <input type="tel" class="inp" placeholder="填写验证码" v-model="secode">
            <message-code :classes="'yanzm'" :sended-style="sendedStyle" :tel="memberInfo.member_mobile" :imgcode="imgCode" type="2" :sign="'0'" :callback="handleMessageCode"></message-code>
          </div>
        <!--</li>-->
        <li class="sli">
          <!--<label>-->
          <div class="lefticon"><i class="iconfont icon-user2"></i></div>
          <div class="fl w550">
            <input type="tel" class="inp" placeholder="请输入受让方ID号" v-model="fkmid" @blur="getInviterName">
          </div>
          <!--<span style="display:inline-block; width:80px; color:#333;">受让方：</span>-->
          <!--<input type="number" placeholder="请输入转给他人的ID号" v-model="fkmid" @blur="getInviterName"></label>-->
        </li>
        <span v-show="inviterName" style="padding: 0 0 10px 10px; font-size: 14px;">{{inviterName}}</span>
        <li class="sli">
          <div class="w550" style="">
            <div style="float: left;width: 33.3%">
              <label>云宝：</label><i class="iconfont icon-select"  v-show="type == 1"></i>
              <i class="iconfont icon-pitch2" @click="switchSelect(1)" v-show="type !=1"></i></div>
            <div style="float: left;width: 33.3%">
              <label>云通证：</label><i class="iconfont icon-select"  v-show="type == 2"></i>
              <i class="iconfont icon-pitch2" @click="switchSelect(2)" v-show="type !=2"></i></div>
            <!--<div style="float: left;width: 33.3%">-->
              <!--<label>花粉：</label><i class="iconfont icon-select"  v-show="type == 3"></i>-->
              <!--<i class="iconfont icon-pitch2" @click="switchSelect(3)" v-show="type !=3"></i></div>-->
            <div style="float: left;width: 33.3%">
              <label>云劵：</label><i class="iconfont icon-select"  v-show="type == 4"></i>
              <i class="iconfont icon-pitch2" @click="switchSelect(4)" v-show="type !=4"></i></div>
          </div>
        </li>
        <li class="sli">
          <!--<label>-->
          <div class="lefticon"><i class="iconfont icon-money"></i></div>
          <div class="fl w550">
            <input type="tel" class="inp" placeholder="请输入转账金额" v-model="money">
          </div>
          <!--<span style="display:inline-block; width:80px; color:#333;">受让方：</span>-->
          <!--<input type="number" placeholder="请输入转给他人的ID号" v-model="fkmid" @blur="getInviterName"></label>-->
        </li>
        <!--<li>-->
          <!--<span style="display:inline-block; width:80px; color:#333;">-->
            <!--<select v-model="type">-->
              <!--<option value="1">云宝:</option>-->
              <!--<option value="2">花股:</option>-->
              <!--<option value="3">花粉:</option>-->
            <!--</select><i class="iconfont icon-downdot" style="pointer-events:none; position:absolute; left:50px; z-index:2; top:0px; color:#ddd; display:block; font-size:12px; width:30px; text-align:center; background:#fff; line-height:49px;"></i></span>-->
          <!--<input type="number" placeholder="请输入要转账的金额" v-model="money">-->
        <!--</li>-->
        <span style="padding: 0 0 10px 10px; font-size: 14px;" v-show="type == 1">可用的云宝：{{memberInfo.freeze_balance}}</span>
        <span style="padding: 0 0 10px 10px; font-size: 14px;" v-show="type == 2">可用的云通证：{{memberInfo.hg_balance}}</span>
        <span style="padding: 0 0 10px 10px; font-size: 14px;" v-show="type == 3">可用的云积分：{{memberInfo.hf_balance}}</span>
        <span style="padding: 0 0 10px 10px; font-size: 14px;" v-show="type == 4">可用的云劵：{{memberInfo.hq_balance}}</span>
      </ul>

    </div>
    <div class="pl20 pr20 mt35">
      <a class="but_1 wauto disb tc" @click="confirmPwd" v-show="status">转账</a>
    </div>
    <div class="pl20 pr20 mt35">
      <a class="but_1 wauto disb tc" @click="" v-show="!status">转账</a>
    </div>
    <back-nav></back-nav>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import {mapModules, mapRules} from 'vuet'
  import {MessageBox} from 'mint-ui'
  // import payPwd from '../../components/payPwd'
  import messageCode from '../../components/message-code.vue'

  export default {
    mixins: [
      mapModules({bankcardList: 'bankcardList', memberInfo: 'memberInfo'}),
      mapRules({need: ['memberInfo', 'bankcardList']})
    ],
    data() {
      return {
        sendedStyle: {color: '#999999', border: '1px solid #999999'}, // 验证码发送后的验证码按钮样式
        fkmid: '',
        inviterName: '',
        money: '',
        status: true,
        type: 1,
        secode: '',
        imgCode: '', // 图片验证码
        imgCodeSrc: '', // 图片验证码图片地址
        sign: '0'
      }
    },
    created() {
      // this.$toast('3000', 5)
      this.mobile = this.memberInfo.member_mobile || ''
      this.imgCodeSrc = 'http://' + window.location.hostname + '/index.php?act=seccode&op=makecode&nchash=48ae8d0d&t=' + Math.random()
    },
    watch: {
      money: function (newValue) {
        let maxMoney = 0
        if (this.type == 1) {
          maxMoney = this.memberInfo.freeze_balance
        } else if (this.type == 2) {
          maxMoney = this.memberInfo.hg_balance
        } else if (this.type == 3) {
          maxMoney = this.memberInfo.hf_balance
        } else if (this.type == 4) {
          maxMoney = this.memberInfo.hq_balance
        }
        if (parseFloat(newValue) > parseFloat(maxMoney)) {
          this.$toast('超出了最大可用额')
          this.money = maxMoney
        }
      }
    },
    components: {
      'message-code': messageCode
    },
    methods: {
      switchSelect(type) {
        this.type = type
      },
      handleMessageCode(code) {
      },
      getImgCode() {
        this.imgCodeSrc = this.$config.website + '/index.php?act=seccode&op=makecode&nchash=48ae8d0d&t=' + Math.random()
      },
      getInviterName() {
        this.$request.getMemberInfoById(this.fkmid).then(data => {
          if (data.member_name) {
            this.inviterName = data.member_truename
          } else {
            this.inviterName = '该邀请人不存在'
          }
        }).catch(e => {
          console.log('邀请人错误', e)
        })
      },
      confirmPwd() {
        if (!this.money) {
          this.$toast('请输入金额')
          return
        }
        if (!this.fkmid) {
          this.$toast('请输入他人ID')
          return
        }
        let restMoney = this.money % 100 // 余数
        if (restMoney > 0) {
          this.$toast('转账金额需为100的倍数')
          return
        }
        // payPwd({}, this.transter)
        MessageBox.confirm(`您将要向` + this.inviterName + '进行转账', '账号确认：' + this.inviterName, {cancelButtonText: '取消', confirmButtonText: '确认'}).then(action => {
          this.transter()
        }).catch(() => {
        })
        // this.transter()
      },
      transter() {
        this.status = false
        this.$request.transterMoney(this.fkmid, this.money, this.type, this.secode).then(data => {
          this.$toast('转账成功')
          this.status = true
          this.$router.push({name: 'my'})
        }).catch(e => {
          this.$toast('转账失败：' + e.msg)
          this.status = true
        })
      }
    }
  }
</script>

<style>

</style>
